<template>
  <div>
    <!-- 11111 -->
    <div class="design">
      <p>
        <img src="/foryou/arrow.svg" alt="" @click="$router.go(-1)">
      </p>
      <h1>最佳设计榜</h1>
      <p><span>装修小伙伴最喜爱的设计风格</span></p>
    </div>
    <div class="detail">
      <ListItem
        :item="{
          image:
            'https://cdn7.axureshop.com/demo/2090757/images/%E7%81%B5%E6%84%9F%E5%90%88%E9%9B%86/u283.png',
          small_title: '2室·1厅·1卫·110㎡·北欧',
          title: '111平北欧混搭新中式，被日湖花园迷住了',
          uPic: 'https://cdn7.axureshop.com/demo/2090757/images/%E9%A6%96%E9%A1%B5/u122.png',
          name: 'Amone',
          sc: 43,
        }"
      />   
      <ListItem
        :item="{
          image:
            'https://cdn7.axureshop.com/demo/2090757/images/%E7%81%B5%E6%84%9F%E5%90%88%E9%9B%86/u283.png',
          small_title: '2室·1厅·1卫·110㎡·北欧',
          title: '111平北欧混搭新中式，被日湖花园迷住了',
          uPic: 'https://cdn7.axureshop.com/demo/2090757/images/%E9%A6%96%E9%A1%B5/u122.png',
          name: 'Amone',
          sc: 43,
        }"
      />  
      <ListItem
        :item="{
          image:
            'https://cdn7.axureshop.com/demo/2090757/images/%E7%81%B5%E6%84%9F%E5%90%88%E9%9B%86/u283.png',
          small_title: '2室·1厅·1卫·110㎡·北欧',
          title: '111平北欧混搭新中式，被日湖花园迷住了',
          uPic: 'https://cdn7.axureshop.com/demo/2090757/images/%E9%A6%96%E9%A1%B5/u122.png',
          name: 'Amone',
          sc: 43,
        }"
      /> 
    </div>
  </div>
</template>

<script>
import ListItem from '@/components/ListItem.vue';
  export default {
    components:{ListItem}
}
</script>

<style lang="scss" scoped>
.design{
    padding: 8px 10px;
    background-image: url('https://cdn7.axureshop.com/demo/2090757/images/%E6%9C%80%E4%BD%B3%E8%AE%BE%E8%AE%A1/u587.png');
    background-position: 0 -30px;
 
  p{
    img{
      width: 20px;
    }
  }
  h1{
    margin-top: 36px;
  }
  h1+p{
    margin-bottom: 25px;
  }
  h1+p>span{
    font-size: 14px;
  }
}
.detail{
  padding: 20px 15px 0 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .outer{
    padding-left: 15px;
    margin-bottom:10px ;
  }
}
</style>